<template>
	<view >
		<view class="catalog-list">
		<view class="catalog-more"><icon  type="success" size="20"/></view>
		
		<scroll-view scroll-x="true"  class="catalogs" show-scrollbar="false" >
			
			<view class="catalog" v-for="(item,index) in catalogs" :class="{active:currentIndex==index ? true: false}" :key="index" @click="changeIndex(index)">{{item}}</view>
		</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				catalogs:['推荐','视频','热点','小说','娱乐','图片','懂车帝','体育','财经','房产','国际','健康','科技','军事','历史','漫画','直播','其他'],
				currentIndex:0
			}
		},
		methods: {
			changeIndex(index){
				console.log(index);
				this.$data.currentIndex=index;
			}
		}
	}
</script>

<style>
.catalog-list{
	position: relative;
	line-height: 50px;
	height: 50px;
}
.catalogs{
	height: 50px;
	width: 100%;
	line-height: 50px;
	white-space: nowrap;
	border-bottom: 1rpx solid #C8C7CC;
	
}
.catalog{
	display: inline-block;
	width: 60px;
	height: 50px;
	line-height: 50px;
	text-align: center;
}
 .active{
	color:red
}
.catalog-more{
	position: absolute;
	display: flex;
	height: 40px;
	width: 50px;
	top: 0;
	right: 0;
	z-index: 999;
	background-color:#FFFFFF;
	justify-content: center;
	align-items: center;
	padding-top:10px ;
	
	
}

</style>
